/*
 * @(#) SelectRole.js
 *
 * <br> Copyright:  Copyright (c) 2017
 * <br>
 * <br> @author caijinhuang
 * <br> 2017-12-08 15:07:17
 */

import React  from 'react';
import '../../../css/select.css'
import $ from 'jquery';
import {Form} from '@share/shareui';
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 该模块需要传入三个参数：
 *  listCell:候选成员列表
 *  option:选择操作
 *  selectedList:已经选中的成员列表
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class SelectRole extends React.Component{
    baseUrl_  = "/sharemeeting";
    constructor(props){
        super(props);
        this.state={
            adminListComponent:[],//管理员列表
            commontListComponent:[],//普通用户员列表
        }
        this.initUserInfo();
    }

    /**
     * 获取新的用户角色信息
     */
    initUserInfo(){
        let url = this.baseUrl_+"/meeting/getBaseInfo.do";
        /*异步请求*/
        fetch(url,{
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            xhrFields: {
                withCredentials: true
            },
        }).then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                if(responseData.status === true){
                    this.initSelectList(responseData.data.users);
                }else{
                    alert(responseData.msg);
                }
            }).catch((error)=> {alert("与服务器失联了");})
    }

    /**
     * 初始化选项列表
     */
    initSelectList(userList){
        console.log(userList);
        this.state.commontListComponent = [];
        userList.forEach((value,index,array)=>{
            if(value.roleName === "user"){
                this.state.commontListComponent.push(<option value={value.userId} key={value.userId}>{value.nickname}</option>);
            }else if(value.roleName === "admin"){
                this.state.adminListComponent.push(<option value={value.userId} key={value.userId}>{value.nickname}</option>);
            }
        });
        console.log(this.state.commontListComponent);
        console.log(this.state.adminListComponent);
        this.setState();
    }
    /**
     * 获取最终选中的成员列表
     * @returns {Array}
     */
    getList(){
        this.state.selectedNow = [];
        var iDom =  this.refs.selected;
        for(let i=0;i<iDom.options.length;i++){
            this.state.selectedNow.push({userId:iDom.options[i].value,name:iDom.options[i].text});
        }
        return this.state.selectedNow;
    }

    componentWillMount(){

    }

    componentDidMount(){

        /*单选*/
        $("#add").bind("click",function(){
            if(!$("#select1 option").is(":selected")){
                alert("选择项为空");
            }else{
                var list = [];
                $("#select1 option:selected").each(function(){
                    list.push($(this).val());
                });
                change('R002',list);
                $("#select1 option:selected").appendTo("#select2");
            }
        });

        $("#remove").bind("click",function(){
            if(!$("#select2 option").is(":selected")){
                alert("选择项为空");
            }else{
                var list = [];
                $("#select2 option:selected").each(function(){
                    list.push($(this).val());
                });
                change('R001',list);
                $("#select2 option:selected").appendTo("#select1");
            }
        });

        /*添加所有*/
        $("#add_all").bind("click",function(){
            var list = [];
            $("#select1 option").each(function(){
                list.push($(this).val());
            });
            change('R002',list);
            $("#select1 option").appendTo("#select2");
        });

        $("#remove_all").bind("click",function(){
            var list = [];
            $("#select2 option").each(function(){
                list.push($(this).val());
            });
            change('R001',list);
            $("#select2 option").appendTo("#select1");
        });

        /*双击*/
        $("#select1").bind("dblclick",function(){
            var list = [];
            $("#select1 option:selected").each(function(){
                list.push($(this).val());
            });
            change('R002',list);
            $("#select1 option:selected").appendTo("#select2");
        });

        $("#select2").bind("dblclick",function(){
            var list = [];
            $("#select2 option:selected").each(function(){
                list.push($(this).val());
            });
            change('R001',list);
            $("#select2 option:selected").appendTo("#select1");
        });

        function change(roleId,list){
            $.ajax({
               url:"/sharemeeting/user/changeUserRole.do",
               data:JSON.stringify({roleId:roleId,userIds:list}),
               type:"post",
               contentType:"application/json",
               dataType:"json",
               xhrFields: {
                   withCredentials: true
               },
               success:function(data){
                   if(data.state === false){
                       alert(data.msg);
                       window.location.href = "http://localhost:8081/#";
                   }else{
                       console.log(data.msg);
                   }

               },
               error:function(data){
                   alert("网络错误，请重试");
               }
           });
        }
    }

    render(){
        return (
            <div className="row select-body">
                <div className="span2">
                    <Form.Label >普通用户：</Form.Label>
                    <select multiple="multiple" id="select1" className="select-left">
                        {this.state.commontListComponent}
                    </select>
                </div>
                <div className="span2">
                    <Form.Label ><br/></Form.Label>
                    <div className="btn-bar">
                        <p><span id="add"><input type="button" className="btn" value=">" title="移动选择项到右侧"/></span></p>
                        <p><span id="add_all"><input type="button" className="btn" value=">>" title="全部移到右侧"/></span></p>
                        <p><span id="remove"><input type="button" className="btn" value="<" title="移动选择项到左侧"/></span></p>
                        <p><span id="remove_all"><input type="button" className="btn" value="<<" title="全部移到左侧"/></span></p>
                    </div>
                </div>
                <div className="span2">
                    <Form.Label >管理员：</Form.Label>
                    <select multiple="multiple" id="select2" className="select-right" ref="selected">
                        {this.state.adminListComponent}
                    </select>
                </div>
            </div>
        );
    }
}
export default SelectRole